<template>
  <div class="app-container">
<!--    pc端-->
    <div v-if="device !== 'mobile'">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="发版" prop="itemFbId">
          <el-select v-model="queryParams.itemFbId"
                     style="width: 170px"
                     filterable placeholder="请选择所属发版名称">
            <el-option
              v-for="fbInfo in fbInfoList"
              :key="fbInfo.pkId"
              :label="fbInfo.fbName"
              :value="fbInfo.pkId"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="应用系统" prop="itemChannelId">-->
<!--          <el-select v-model="queryParams.itemChannelId"-->
<!--                     style="width: 170px"-->
<!--                     filterable placeholder="请选择所属应用系统名称">-->
<!--            <el-option-->
<!--              v-for="channelInfo in channelInfoListForQuery"-->
<!--              :key="channelInfo.pkId"-->
<!--              :label="channelInfo.channelName"-->
<!--              :value="channelInfo.pkId"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="cq主单编号" prop="itemCqCode">
          <el-input
            v-model="queryParams.itemCqCode"
            placeholder="请输入cq主单编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="标题" prop="itemTitle">
          <el-input
            v-model="queryParams.itemTitle"
            placeholder="请输入标题"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['yjcz:importantItem:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['yjcz:importantItem:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['yjcz:importantItem:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['yjcz:importantItem:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="importantItemList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="发版" align="center" prop="fbName"/>
        <el-table-column label="应用系统" align="center" prop="channelName" show-overflow-tooltip/>
        <el-table-column label="cq主单编号" align="center" prop="itemCqCode"/>
        <el-table-column label="标题" align="center" prop="itemTitle" show-overflow-tooltip/>
        <el-table-column label="需求描述" align="center" prop="itemDesc" show-overflow-tooltip/>
        <el-table-column label="是否初次上线新功能" align="center" prop="itemFirstOnlineFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemFirstOnlineFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="是否正式对外" align="center" prop="itemOutFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemOutFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="本次上线渠道" align="center" prop="itemOnlineChannel" show-overflow-tooltip/>
        <el-table-column label="影响渠道" align="center" prop="itemEffectChannel" show-overflow-tooltip/>
        <el-table-column label="本次上线行" align="center" prop="itemOnlineBank" show-overflow-tooltip/>
        <el-table-column label="影响成员行" align="center" prop="itemEffectBank" show-overflow-tooltip/>
        <el-table-column label="发版后验证方式" align="center" prop="itemCheckType" show-overflow-tooltip/>
        <el-table-column label="检核人" align="center" prop="checkUserName" />
        <el-table-column label="检核结果" align="center" prop="itemCheckResult" show-overflow-tooltip/>
        <el-table-column label="是否导致系统全局业务中断风险" align="center" prop="itemGlobalFuseFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemGlobalFuseFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="安全测试" align="center" prop="itemSafeTest" show-overflow-tooltip/>
        <el-table-column label="性能测试" align="center" prop="itemPerformanceTest" show-overflow-tooltip/>
        <el-table-column label="投产监控机制" align="center" prop="itemMonitorMechanism" show-overflow-tooltip/>
        <el-table-column label="监控具体实现" align="center" prop="itemMonitorAchieve" show-overflow-tooltip/>
        <el-table-column label="异常回退机制" align="center" prop="itemExBackMechanism" show-overflow-tooltip/>
        <el-table-column label="是否修改公共流程或方法" align="center" prop="itemModCommonFlowFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemModCommonFlowFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="是否提供影响交易清单" align="center" prop="itemEffectListFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemEffectListFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="是否账务交易" align="center" prop="itemAccountTransFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemAccountTransFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="是否影响原有功能" align="center" prop="itemEffectOldFuncFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemEffectOldFuncFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="影响原有功能描述" align="center" prop="itemEffectOldFuncDesc" show-overflow-tooltip/>
        <el-table-column label="风险点补充" align="center" prop="itemRiskItemAppend" show-overflow-tooltip/>
        <el-table-column label="行方验收报告" align="center" prop="itemBankAcceptReport" show-overflow-tooltip/>
        <el-table-column label="测试案例是否评审" align="center" prop="itemTestCaseReviewFlag">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.yes_no_enums" :value="scope.row.itemTestCaseReviewFlag"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['yjcz:importantItem:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['yjcz:importantItem:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改重大发版事项对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="220px">
          <el-form-item label="发版" prop="itemFbId">
            <el-select v-model="form.itemFbId" filterable placeholder="请选择发版名称">
              <el-option
                v-for="fbInfo in fbInfoList"
                :key="fbInfo.pkId"
                :label="fbInfo.fbName"
                :value="fbInfo.pkId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用系统" prop="itemChannelIds">
            <el-select v-model="form.itemChannelIds" filterable multiple placeholder="请选择应用系统名称" >
              <el-option
                v-for="channelInfo in channelInfoList"
                :key="channelInfo.pkId"
                :label="channelInfo.channelName"
                :value="channelInfo.pkId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="cq主单编号" prop="itemCqCode">
            <el-input v-model="form.itemCqCode" placeholder="请输入cq主单编号" />
          </el-form-item>
          <el-form-item label="标题" prop="itemTitle">
            <el-input v-model="form.itemTitle" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="需求描述" prop="itemDesc">
            <el-input v-model="form.itemDesc" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="是否初次上线新功能" prop="itemFirstOnlineFlag">
            <el-select v-model="form.itemFirstOnlineFlag" placeholder="请选择是否初次上线新功能">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否正式对外" prop="itemOutFlag">
            <el-select v-model="form.itemOutFlag" placeholder="请选择是否正式对外">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本次上线渠道" prop="itemOnlineChannelIds">
            <el-select v-model="form.itemOnlineChannelIds" filterable multiple placeholder="请选择本次上线渠道" >
              <el-option
                v-for="channelInfo in channelInfoList"
                :key="channelInfo.pkId"
                :label="channelInfo.channelName"
                :value="channelInfo.pkId"
              ></el-option>
            </el-select>
<!--            <el-input v-model="form.itemOnlineChannel" placeholder="请输入本次上线渠道" />-->
          </el-form-item>
          <el-form-item label="影响渠道" prop="itemEffectChannelIds">
            <el-select v-model="form.itemEffectChannelIds" filterable multiple placeholder="请选择影响渠道" >
              <el-option
                v-for="channelInfo in channelInfoList"
                :key="channelInfo.pkId"
                :label="channelInfo.channelName"
                :value="channelInfo.pkId"
              ></el-option>
            </el-select>
<!--            <el-input v-model="form.itemEffectChannel" placeholder="请输入影响渠道" />-->
          </el-form-item>
          <el-form-item label="本次上线行" prop="itemOnlineBank">
            <el-input v-model="form.itemOnlineBank" placeholder="请输入本次上线行" />
          </el-form-item>
          <el-form-item label="影响成员行" prop="itemEffectBank">
            <el-input v-model="form.itemEffectBank" placeholder="请输入影响成员行" />
          </el-form-item>
          <el-form-item label="发版后验证方式" prop="itemCheckType">
            <el-input v-model="form.itemCheckType" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="检核人" prop="itemCheckUserId">
            <el-select v-model="form.itemCheckUserId" filterable placeholder="请选择检核人">
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检核结果" prop="itemCheckResult">
            <el-input v-model="form.itemCheckResult" placeholder="请输入检核结果" />
          </el-form-item>
          <el-form-item label="是否导致系统全局业务中断风险" prop="itemGlobalFuseFlag">
            <el-select v-model="form.itemGlobalFuseFlag" placeholder="请选择是否导致系统全局业务中断风险">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全测试" prop="itemSafeTest">
            <el-input v-model="form.itemSafeTest" placeholder="请输入安全测试" />
          </el-form-item>
          <el-form-item label="性能测试" prop="itemPerformanceTest">
            <el-input v-model="form.itemPerformanceTest" placeholder="请输入性能测试" />
          </el-form-item>
          <el-form-item label="投产监控机制" prop="itemMonitorMechanism">
            <el-input v-model="form.itemMonitorMechanism" placeholder="请输入投产监控机制" />
          </el-form-item>
          <el-form-item label="监控具体实现" prop="itemMonitorAchieve">
            <el-input v-model="form.itemMonitorAchieve" placeholder="请输入监控具体实现" />
          </el-form-item>
          <el-form-item label="异常回退机制" prop="itemExBackMechanism">
            <el-input v-model="form.itemExBackMechanism" placeholder="请输入异常回退机制" />
          </el-form-item>
          <el-form-item label="是否修改公共流程或方法" prop="itemModCommonFlowFlag">
            <el-select v-model="form.itemModCommonFlowFlag" placeholder="请选择是否修改公共流程或方法">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否提供影响交易清单" prop="itemEffectListFlag">
            <el-select v-model="form.itemEffectListFlag" placeholder="请选择是否提供影响交易清单">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否账务交易" prop="itemAccountTransFlag">
            <el-select v-model="form.itemAccountTransFlag" placeholder="请选择是否账务交易">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否影响原有功能" prop="itemEffectOldFuncFlag">
            <el-select v-model="form.itemEffectOldFuncFlag" placeholder="请选择是否影响原有功能">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="影响原有功能描述" prop="itemEffectOldFuncDesc">
            <el-input v-model="form.itemEffectOldFuncDesc" placeholder="请输入影响原有功能描述" />
          </el-form-item>
          <el-form-item label="风险点补充" prop="itemRiskItemAppend">
            <el-input v-model="form.itemRiskItemAppend" placeholder="请输入风险点补充" />
          </el-form-item>
          <el-form-item label="行方验收报告" prop="itemBankAcceptReport">
            <el-input v-model="form.itemBankAcceptReport" placeholder="请输入行方验收报告" />
          </el-form-item>
          <el-form-item label="测试案例是否评审" prop="itemTestCaseReviewFlag">
            <el-select v-model="form.itemTestCaseReviewFlag" placeholder="请选择测试案例是否评审">
              <el-option
                v-for="dict in dict.type.yes_no_enums"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>



<!--    移动端-->
    <div v-if="device === 'mobile'">
      <van-form>
<!--        <fb-and-channel-select-picker-->
<!--          ref="fbChannelPicker"-->
<!--          :params="queryParams"-->
<!--          fb-id-prop="itemFbId"-->
<!--          channel-id-prop="itemChannelId"-->
<!--        />-->
        <van-field-select-picker
          v-model="queryParams.itemFbId"
          label="发版名称"
          placeholder="点击选择发版名称"
          :columns="fbInfoList"
          :option="{label:'fbName',value:'pkId'}"
          :isSearch="true"
        />
        <van-field
          name="cq主单编号"
          label="cq主单编号"
          placeholder="请填写cq主单编号"
          v-model="queryParams.itemCqCode"
        />
        <van-field
          name="标题"
          label="标题"
          placeholder="请填写事项标题"
          v-model="queryParams.itemTitle"
        />
        <div style="margin: 16px;">
          <!-- 居中 -->
          <van-row type="flex" justify="center">
            <van-col span="8">
              <van-button style="width: 100%" round type="info" native-type="submit" @click="handleQuery" icon="search">
                搜索
              </van-button>
            </van-col>
            <van-col span="2">
            </van-col>
            <van-col span="8">
              <van-button style="width: 100%" round type="default" @click="resetAndGetList" icon="replay">
                重置
              </van-button>
            </van-col>
          </van-row>
        </div>
      </van-form>

      <van-collapse v-model="mobilePluginsProp.activeNames">
        <van-swipe-cell v-for="item in importantItemList">
          <van-collapse-item :title="item.itemTitle" :key="item.pkId">
            <van-cell-group>
              <van-cell :title="'标题：' + item.itemTitle" />
              <van-cell :title="'发版名称：' + item.fbName" />
              <van-cell :title="'应用系统：' + item.channelName" />
              <van-cell :title="'cq主单编号：' + mobileListNullCell(item.itemCqCode)" />
              <van-cell :title="'需求描述：' + mobileListNullCell(item.itemDesc)" />
              <van-cell :title="'本次上线渠道：' + mobileListNullCell(item.itemOnlineChannel)" />
              <van-cell :title="'影响渠道：' + mobileListNullCell(item.itemEffectChannel)" />
              <van-cell :title="'本次上线行：' + mobileListNullCell(item.itemOnlineBank)" />
              <van-cell :title="'影响成员行：' + mobileListNullCell(item.itemEffectBank)" />
            </van-cell-group>
          </van-collapse-item>
          <template #right>
            <van-button square type="info" text="查看详情" icon="search" @click="mobileSearch(item.pkId)" />
          </template>
        </van-swipe-cell>
      </van-collapse>

      <van-pagination
        v-model="queryParams.pageNum"
        :total-items="total"
        :show-page-size="queryParams.pageSize"
        force-ellipses
        @change="getList"
      />


      <van-dialog v-model="mobilePluginsProp.mobileSearchOpen" :title="mobilePluginsProp.searchTitle" :showCancelButton="true" :showConfirmButton="false" style="height: 90%; overflow-y: auto">
        <van-form validate-first>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            readonly
            name="发版"
            autosize
            type="textarea"
            label="发版"
            v-model="form.fbName"
          />

          <van-field
            readonly
            autosize
            type="textarea"
            name="应用系统"
            label="应用系统"
            v-model="form.channelName"
          />

          <van-field
            readonly
            name="cq主单编号"
            label="cq主单编号"
            v-model="form.itemCqCode"
          />

          <van-field
            readonly
            autosize
            type="textarea"
            name="标题"
            label="标题"
            v-model="form.itemTitle"
          />

          <van-field
            readonly
            autosize
            type="textarea"
            name="需求描述"
            label="需求描述"
            v-model="form.itemDesc"
          />

          <van-field
            readonly
            name="是否初次上线新功能"
            label="是否初次上线新功能"
            v-model="form.itemFirstOnlineFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            name="是否正式对外"
            label="是否正式对外"
            v-model="form.itemOutFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="本次上线渠道"
            label="本次上线渠道"
            v-model="form.itemOnlineChannel"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="影响渠道"
            label="影响渠道"
            v-model="form.itemEffectChannel"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="本次上线行"
            label="本次上线行"
            v-model="form.itemOnlineBank"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="影响成员行"
            label="影响成员行"
            v-model="form.itemEffectBank"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="发版后验证方式"
            label="发版后验证方式"
            v-model="form.itemCheckType"
          />
          <van-field
            readonly
            name="检核人"
            label="检核人"
            v-model="form.checkUserName"
          />
          <van-field
            readonly
            name="检核结果"
            label="检核结果"
            v-model="form.itemCheckResult"
          />
          <van-field
            readonly
            name="是否导致系统全局业务中断风险"
            label="是否导致系统全局业务中断风险"
            v-model="form.itemGlobalFuseFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="安全测试"
            label="安全测试"
            v-model="form.itemSafeTest"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="性能测试"
            label="性能测试"
            v-model="form.itemPerformanceTest"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="投产监控机制"
            label="投产监控机制"
            v-model="form.itemMonitorMechanism"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="监控具体实现"
            label="监控具体实现"
            v-model="form.itemMonitorAchieve"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="异常回退机制"
            label="异常回退机制"
            v-model="form.itemExBackMechanism"
          />
          <van-field
            readonly
            name="是否修改公共流程或方法"
            label="是否修改公共流程或方法"
            v-model="form.itemModCommonFlowFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            name="是否提供影响交易清单"
            label="是否提供影响交易清单"
            v-model="form.itemEffectListFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            name="是否账务交易"
            label="是否账务交易"
            v-model="form.itemAccountTransFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            name="是否影响原有功能"
            label="是否影响原有功能"
            v-model="form.itemEffectOldFuncFlag == 1 ? '是' : '否'"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="影响原有功能描述"
            label="影响原有功能描述"
            v-model="form.itemEffectOldFuncDesc"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="风险点补充"
            label="风险点补充"
            v-model="form.itemRiskItemAppend"
          />
          <van-field
            readonly
            autosize
            type="textarea"
            name="行方验收报告"
            label="行方验收报告"
            v-model="form.itemBankAcceptReport"
          />
          <van-field
            readonly
            name="测试案例是否评审"
            label="测试案例是否评审"
            v-model="form.itemTestCaseReviewFlag == 1 ? '是' : '否'"
          />
        </van-form>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import {
  listImportantItem,
  getImportantItem,
  delImportantItem,
  addImportantItem,
  updateImportantItem,
  listChannelInfo,
  listFbInfo,
  listUserInfo,
  listAllChannel
} from "@/api/yjcz/importantItem";
import {mapState} from "vuex";
import VanFieldSelectPicker from "@/components/VantTools/VanFieldSelectPicker";
import FbAndChannelSelectPicker from "@/components/VantTools/FbAndChannelSelectPicker";

export default {
  name: "ImportantItem",
  dicts: ['yes_no_enums'],
  components: { VanFieldSelectPicker, FbAndChannelSelectPicker },
  computed: {
    ...mapState({
      device: state => state.app.device,
    })
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 重大发版事项表格数据
      importantItemList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        itemFbId: null,
        itemChannelId: null,
        itemCqCode: null,
        itemTitle: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        itemFbId: [
          { required: true, message: "发版id不能为空", trigger: "blur" }
        ],
        itemChannelId: [
          { required: true, message: "应用系统id不能为空", trigger: "blur" }
        ],
        itemCqCode: [
          { required: true, message: "cq主单编号不能为空", trigger: "blur" }
        ],
        itemTitle: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        itemDesc: [
          { required: true, message: "需求描述不能为空", trigger: "blur" }
        ],
        itemFirstOnlineFlag: [
          { required: true, message: "是否初次上线新功能不能为空", trigger: "change" }
        ],
        itemOutFlag: [
          { required: true, message: "是否正式对外不能为空", trigger: "change" }
        ],
        itemOnlineChannel: [
          { required: true, message: "本次上线渠道不能为空", trigger: "blur" }
        ],
        itemEffectChannel: [
          { required: true, message: "影响渠道不能为空", trigger: "blur" }
        ],
        itemOnlineBank: [
          { required: true, message: "本次上线行不能为空", trigger: "blur" }
        ],
        itemEffectBank: [
          { required: true, message: "影响成员行不能为空", trigger: "blur" }
        ],
        itemCheckType: [
          { required: true, message: "发版后验证方式不能为空", trigger: "blur" }
        ],
        itemGlobalFuseFlag: [
          { required: true, message: "是否导致系统全局业务中断风险不能为空", trigger: "change" }
        ],
        itemSafeTest: [
          { required: true, message: "安全测试不能为空", trigger: "blur" }
        ],
        itemPerformanceTest: [
          { required: true, message: "性能测试不能为空", trigger: "blur" }
        ],
        itemMonitorMechanism: [
          { required: true, message: "投产监控机制不能为空", trigger: "blur" }
        ],
        itemMonitorAchieve: [
          { required: true, message: "监控具体实现不能为空", trigger: "blur" }
        ],
        itemExBackMechanism: [
          { required: true, message: "异常回退机制不能为空", trigger: "blur" }
        ],
        itemModCommonFlowFlag: [
          { required: true, message: "是否修改公共流程或方法不能为空", trigger: "change" }
        ],
        itemEffectListFlag: [
          { required: true, message: "是否提供影响交易清单不能为空", trigger: "change" }
        ],
        itemAccountTransFlag: [
          { required: true, message: "是否账务交易不能为空", trigger: "change" }
        ],
        itemEffectOldFuncFlag: [
          { required: true, message: "是否影响原有功能不能为空", trigger: "change" }
        ],
        itemTestCaseReviewFlag: [
          { required: true, message: "测试案例是否评审不能为空", trigger: "change" }
        ],
      },
      fbInfoList: [],
      channelInfoListForQuery: [],
      channelInfoList: [],
      userList: [],
      mobilePluginsProp: {
        activeNames: [],
        mobileSearchOpen: false,
        searchTitle: '查看事项详情'
      }
    };
  },
  created() {
    this.$nextTick(() => {
      if (this.device !== 'mobile') {
        this.getUserList()
        this.getChannelList()
      }
    })
    this.getFbInfoList()
    this.getList();
  },
  methods: {
    /** 查询重大发版事项列表 */
    getList() {
      this.loading = true;
      listImportantItem(this.queryParams).then(response => {
        this.importantItemList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        pkId: null,
        itemFbId: null,
        itemChannelId: null,
        itemCqCode: null,
        itemTitle: null,
        itemDesc: null,
        itemFirstOnlineFlag: null,
        itemOutFlag: null,
        itemOnlineChannel: null,
        itemEffectChannel: null,
        itemOnlineBank: null,
        itemEffectBank: null,
        itemCheckType: null,
        itemCheckUserId: null,
        itemCheckResult: null,
        itemGlobalFuseFlag: null,
        itemSafeTest: null,
        itemPerformanceTest: null,
        itemMonitorMechanism: null,
        itemMonitorAchieve: null,
        itemExBackMechanism: null,
        itemModCommonFlowFlag: null,
        itemEffectListFlag: null,
        itemAccountTransFlag: null,
        itemEffectOldFuncFlag: null,
        itemEffectOldFuncDesc: null,
        itemRiskItemAppend: null,
        itemBankAcceptReport: null,
        itemTestCaseReviewFlag: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetAndGetList () {
      this.$refs.fbChannelPicker.resetSelect()
      Object.assign(this.queryParams, {
        itemCqCode: null,
        itemTitle: null,
        pageNum: 1
      })
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.pkId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加重大发版事项";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const pkId = row.pkId || this.ids
      getImportantItem(pkId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改重大发版事项";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.pkId != null) {
            updateImportantItem(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addImportantItem(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const pkIds = row.pkId || this.ids;
      this.$modal.confirm('是否确认删除重大发版事项编号为"' + pkIds + '"的数据项？').then(function() {
        return delImportantItem(pkIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('yjcz/importantItem/export', {
        ...this.queryParams
      }, `importantItem_${new Date().getTime()}.xlsx`)
    },

    getFbInfoList() {
      listFbInfo().then(response => {
        if (response.code === 200) {
          this.fbInfoList = response.data
        }
      })
    },
    getChannelList () {
      listAllChannel().then(res => {
        if (res.code === 200) {
          this.channelInfoList = res.data
        }
      })
    },
    getChannelInfoList(isQuery) {
      let eventFbId
      if (isQuery) {
        eventFbId = this.queryParams.itemFbId
      } else {
        eventFbId = this.form.itemFbId
      }
      if (!eventFbId) {
        if (isQuery) {
          this.channelInfoListForQuery = []
          this.queryParams.itemChannelId = ''
        } else {
          this.channelInfoList = []
          this.form.itemChannelId = ''
        }
      } else {
        let eventChannelId
        if (isQuery) {
          eventChannelId = this.queryParams.itemChannelId
        } else {
          eventChannelId = this.form.itemChannelId
        }
        listChannelInfo(eventFbId).then(response => {
          if (response.code === 200) {
            let channelList = response.data
            if (isQuery) {
              this.channelInfoListForQuery = channelList
            } else {
              this.channelInfoList = channelList
            }
            let exists = (channelList.findIndex(d => d.pkId == eventChannelId) > -1)
            if (!exists) {
              if (isQuery) {
                this.queryParams.itemChannelId = ''
              } else {
                this.form.itemChannelId = ''
              }
            }
          }
        })
      }
    },
    /** 查询用户列表 */
    getUserList () {
      listUserInfo().then(response => {
        if (response.code === 200) {
          this.userList = response.data
        }
      })
    },
    mobileListNullCell (value) {
      return value ? value : '无'
    },
    mobileSearch (pkId) {
      getImportantItem(pkId).then(response => {
        this.form = response.data;
        this.mobilePluginsProp.mobileSearchOpen = true;
      });
    }
  }
};
</script>
